@extends('web.layout')

@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="{{ asset('static/less/product.css') }}?ver={{ config('app.asset_version') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('static/less/pagination.css') }}?ver={{ config('app.asset_version') }}"/>
    {{--<link rel="stylesheet" type="text/css" href="{{ asset('static/font/font.css') }}?ver={{ config('app.asset_version') }}"/>--}}
    <style>
        .g-icons{
            justify-content: space-around;
        }
        .g-icons li{
            margin-right: 20px;
        }
        .g-icons li .p2 {
            font-size: 14px;
        }
        @media screen and (max-width: 1024px){
            .g-icons li{
                margin-right: 0;
            }

        }
        ._show_loading{
            overflow-y: auto;
        }
        ._show_loading:before{
            background-color: rgb(247 247 247 / 60%);
        }
    </style>
@stop
@section('script')
    @parent
    <script>
        $('.queue-sec').click(function () {
            if($(this).find('.queue-title').hasClass('title-on')){
                $(this).find('.queue-title').removeClass('title-on');
                $(this).find('.queue-box').removeClass('box-on');
                
            }else{
                $(this).find('.queue-title').addClass('title-on');
                $(this).find('.queue-box').addClass('box-on');
            }
        })



        var current_page = 1;
        var last_page = parseInt("{{ $products->lastPage() }}");
        var is_active = false;
        $('#loading-product').click(function () {

            //此位置可增加loading效果
            $(this).addClass('hidden')
            $('.product-loading').removeClass('hidden')

            if(!is_active){
                if(last_page > current_page){
                    is_active = true
                    $.ajax({
                        type: 'GET',
                        url: '{{ request()->fullUrl() }}',
                        data:{
                            page:current_page+1,
                        },
                        dataType: "html",
                        success: function(data){
                            $('#goods-section').append(data);
                            //lazyload();
                            current_page++
                            is_active = false;
                            $('img.lazyload').each(function (){
                                var src = $(this).attr('data-src');
                                if(src){
                                    $(this).attr('src',src);
                                    $(this).removeAttr('data-src');
                                }
                            });

                            setTimeout(function() {
                                //这里关闭loading
                                $('#loading-product').removeClass('hidden')
                                $('.product-loading').addClass('hidden')

                                if(current_page >= last_page){
                                    //最后一页，可做相关的提示
                                    $('#loading-product').addClass('hidden')
                                }
                            }, 500);


                        }
                    });
                }
            }


        })
        
        
    </script>


@stop
@php
    $privacy_text = str_replace(PHP_EOL,"<br>",app('cache.config')->get('privacy_text'));
@endphp

@section('topic-title',isset($team)?$team->name:"開始選妃")
@section('topic-describe')
    {!! isset($team) ? $team->desc . '<br/><a class="go-desc" href="'.url('team-about/'.$team->id).'">查看班表</a>' : '' !!}
@endsection

@section('content')

    <div class="container">
        <div class="intro">
            <p class="text">
                {!! str_replace(PHP_EOL,"<br>",app('cache.config')->get('contact_page_text')) !!}
            </p>
        </div>
        <div class="main">
            <div class="wrap">
                <div class="main-content clearfix">
                    {{--<div class="queue-sec">
                        <p class="queue-title"><span id="queue-title-text">{{ $queue_title }}</span><i class="iconfont avatar">&#xe6ef;</i></p>
                        <ul class="queue-box">
                            <li class="queue-item"><a class="{{ request('order')==null?'active':'' }}" href="{{ url('team-detail/'.$team->id) }}">新妹優先</a></li>
                            <li class="queue-item"><a class="{{ request('order')=='red'?'active':'' }}" href="?order=red">紅牌優先</a></li>
                            <li class="queue-item"><a class="{{ request('order')=='secretly'?'active':'' }}" href="?order=secretly">暗配優先</a></li>
                            <li class="queue-item"><a class="{{ request('order')=='boobs'?'active':'' }}" href="?order=boobs">巨乳優先</a></li>
                            <li class="queue-item"><a class="{{ request('order')=='long'?'active':'' }}" href="?order=long">長腿優先</a></li>
                            <li class="queue-item"><a class="{{ request('order')=='short'?'active':'' }}" href="?order=short">小隻馬優先</a></li>
                        </ul>
                    </div>--}}
                    <div class="product-body" id="product-main">
                        <ul class="product-list clearfix" id="goods-section">

                            @if(!request()->has('order'))
                                @php
                                    $products = $products->merge($videoProduct)->shuffle();
                                @endphp
                            @endif
                            @foreach($products as $key=>$item)

                                <li class="item" style="--font-family:{{ isset($item->font) && $item->font?$item->font->name:"" }}">
                                    
                                        <div class="box">
                                            <a href="{{ url('product/'.$item->id) }}">
                                                <figure class="pic">
                                                    <img class="lazyload" src="{{ asset_upload(resize_img(collect($item->img)->first())) }}" data-src="{{asset_upload(collect($item->img)->first())}}" alt="{{ $item->name }}">
                                                    <p class="name {{ $item->name_map_position }} {{ $item->name_class }}" style="--rotate:{{ $item->name_map_rotate }}deg" data-name="{{ $item->name }}">{{ $item->name }}</p>
                                                    <p class="body {{ $item->three_map_position }} {{ $item->three_class }}" style="--rotate:{{ $item->three_map_rotate }}deg" data-body="{{ $item->height.$item->three_separator.$item->weight.$item->three_separator.$item->cup }}">{{ $item->height.$item->three_separator.$item->weight.$item->three_separator.$item->cup }}</p>
                                                    <!-- <div class="playicon">
                                                        <img src="/static/img/16.jpg" style="opacity: 0.7;" alt="">
                                                        <i class="iconfont">&#xe697;</i>
                                                    </div> -->
                                                    @if($item->show_video == 1)
                                                        <div class="video-box">
                                                            <video id="cover-video" loop="" muted="" playsinline="" autoplay poster="{{ asset_upload($item->video_cover) }}">
                                                                <source src="{{ asset_upload($item->video) }}" type="video/mp4">
                                                            </video>
                                                        </div>
                                                    @endif
                                                </figure>
                                            </a>
                                            <div class="infobox">
                                                    @if($item->price < 3000)
                                                        <div class="price-card">
                                                            <p class="price"><span class="nt">NT$</span>{{ $item->price }}</p>
                                                        </div>
                                                    @else
                                                        <div class="red-card">
                                                            <p class="red-price"><span class="red-nt">紅牌 NT$</span>{{ $item->price }}</p>
                                                        </div>
                                                    @endif

                                                    <div class="sales">
                                                        @if($item->labels)
                                                            @foreach($item->labels as $label)
                                                                <span class="sales-item">{{ \Illuminate\Support\Str::limit($label,14,'...') }}</span>
                                                            @endforeach
                                                        @endif
                                                    </div>

                                                </div>

                                                
                                                {{--<p class="name">{{ $item->name }}</p>--}}
                                                <div class="product-btn">
                                                    
                                                    
                                                    
                                                    
                                                    <a href="{{ liaison_get('line_url') }}" target="_blank" class="line-btn" data-inquire="" data-inquire-type="line" data-inquire-position="預約產品">
                                                        <span class="lineme">預約&nbsp;{{ $item->name }}</span>
                                                        <i class="iconfont">&#xebf5;</i>
                                                    </a>
                                                </div>
                                        </div>
                                        
                                        
                                    
                                    
                                </li>

                            @endforeach


                        </ul>
                        @if(!is_googlebot())
                        <div class="load-box">
                            <button id="loading-product" class="load-btn" type="button">加載更多</button>
                            <div class="product-loading hidden">
                                <img width="50" src="{{ asset_upload(app('cache.config')->get('loading_image')) }}" alt="loading">
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bad-section">
        <div class="atlas">

            <ul>
                @foreach($teams as $item)

                    <li>
                        <a href="{{ url('team-about/'.$item->id) }}">
                            <div class="badcover">
                                <img src="{{ asset_upload($item->cover) }}" alt="{{ $item->name }}">
                                <div class="cover-text">
                                    <p class="cover-title">{{ $item->name }}</p>
                                    <p class="cover-sub">本週排班芳療師<span class="num">&nbsp;{{ $item->products->count() }}&nbsp;</span>個</p>
                                    
                                </div>
                                <span class="sa-btn">開始選妃</span>
                            </div>
                            
                            
                            <div class="redcard">
                                <p class="redcard-title">本週紅牌Top5：</p>
                                <div class="avatar">
                                    @foreach($item->popular() as $v)
                                        <div class="avatar-item">
                                            <img src="{{ asset_upload($v->img) }}" alt="{{ $v->name }}">
                                        </div>
                                    @endforeach
                                </div>
                                
                            </div>
                        </a>
                        
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection
@section('breadcrumb')
    <ul class="breadcrumb">
        <li><a href="{{ url('/') }}">首頁</a></li>
        <li class="active">{{ isset($team)?$team->name:"開始選妃" }}</li>
    </ul>
@stop
